Padding Untuk LeftView atau RightView UITextField

Fitsyu Two

2017-03-18

swift

Bila kita memberikan view untuk LeftView atau RightView pada UITextField, kita akan lihat bahwa view tersebut terlalu mepet ke pinggir UITextField.

1
2
3

	txOrgAirport.leftView = UIImageView(image: #imageLiteral(resourceName: "icon_location"))
	txOrgAirport.leftViewMode = .always
`

![too close](/images/left view that too close too edge.png)

beberapa pendekatan

Saya udah coba memberikan auto layout namun tak berhasil.

Saya juga mencoba mengedit iconnya di GIMP dan memberikan padding manual :(. Walaupun ini berhasil tapi sangat terasa melelahkan bila banyak UITextField yang perlu diberi icon.

Saya juga mencoba mengubah x pada frame view nya, seperti berikut:

1
2
3

	let iconView = UIImageView(frame: CGRect(x: 8, y: 0, width: 20, height: 20))
	iconView.image = icon_location
`

Tetap tidak berhasil.

Yess!

Lalu saya coba membungkus ImageView di dalam View biasa. View yang diluar saya berikan width lebih lebar sesuai jumlah padding yang diinginkan. Setelah itu x dari ImageView itu saya buat agar sesuai jumlah paddingnya.

1
2
3

	let outerView = UIView(frame: CGRect(x: 0, y: 0, width: size+padding, height: size) )
	let iconView  = UIImageView(frame: CGRect(x: padding, y: 0, width: size, height: size))
`

Nah yang ini baru bisa!

Supaya lebih mudah digunakan, mari kita taro dalam extension.

Demen banget saya sama fitur extension di Swift ini :-)

extension UITextField {

 /// set icon of 20x20 with left padding of 8px
 func setLeftIcon(_ icon: UIImage) {

		let padding = 8
		let size = 20

		let outerView = UIView(frame: CGRect(x: 0, y: 0, width: size+padding, height: size) )
		let iconView  = UIImageView(frame: CGRect(x: padding, y: 0, width: size, height: size))
		iconView.image = icon
		outerView.addSubview(iconView)

		leftView = outerView
		leftViewMode = .always  
	}
}